<template>
    <view>
        <!-- component/ordertail/index.wxml -->
        <view class="ordercode">
            <view class="mdlsflexbox">
                <view class="centers">
                    <image class="icon-32 mr-10" :src="imgUrl + 'ordercode2.png'"></image>
                    <text class="codetext1">订单编号:</text>
                </view>
                <view class="centers">
                    <view class="codetext2">{{ order.orderno }}</view>
                </view>
            </view>
            <view class="mdlsflexbox">
                <view class="centers">
                    <image class="icon-32 mr-10" :src="imgUrl + 'ordercode1.png'"></image>
                    <text class="codetext1">创建时间:</text>
                </view>
                <view class="centers">
                    <view class="codetext2">{{ order.newcreatetime }}</view>
                </view>
            </view>
            <view class="mdlsflexbox" v-if="status != 5 && order.paytime">
                <view class="centers">
                    <image class="icon-32 mr-10" :src="imgUrl + 'steptime.png'"></image>
                    <text class="codetext1">付款时间:</text>
                </view>
                <view class="centers">
                    <view class="codetext2" v-if="order.paytime">{{ order.newpaytime }}</view>
                </view>
            </view>
            <view v-if="order.endtime || order.canceltime">
                <view class="mdlsflexbox" v-if="status == 11 || status == 10 || status == 7 || status == 6">
                    <view class="centers">
                        <image class="icon-32 mr-10" :src="imgUrl + 'step33.png'"></image>
                        <text class="codetext1">完成时间：</text>
                    </view>
                    <view class="centers">
                        <view class="codetext2" v-if="order.endtime">{{ order.newendtime }}</view>
                        <view class="codetext2" v-else-if="order.canceltime">{{ order.newcanceltime }}</view>
                    </view>
                </view>
            </view>
            <view v-if="order.servicemodel == 1">
                <view class="mdlsflexbox" v-if="status != 5 && order.paytype">
                    <view class="centers">
                        <image class="icon-32 mr-10" :src="imgUrl + 'ordercode3.png'"></image>
                        <text class="codetext1">支付方式:</text>
                    </view>
                    <view class="centers">
                        <view class="codetext2" v-if="order.paytype == 'weixin' || order.paytype == 'wxappletpay'">微信支付</view>
                        <view class="codetext2" v-if="order.paytype == 'blance'">余额支付</view>
                    </view>
                </view>
            </view>
        </view>
        <view class="ordercode" v-if="status == 10 && order.paytime != null">
            <view class="mdlsflexbox">
                <view class="centers">
                    <image class="icon-32 mr-10" :src="imgUrl + 'ordercode6.png'"></image>
                    <text class="codetext1">关闭时间：</text>
                </view>
                <view class="centers">
                    <view class="codetext2">{{ order.newcanceltime }}</view>
                </view>
            </view>
            <view class="mdlsflexbox">
                <view class="centers">
                    <image class="icon-32 mr-10" :src="imgUrl + 'ordercode1.png'"></image>
                    <text class="codetext1">退款时间：</text>
                </view>
                <view class="centers">
                    <view class="codetext2">{{ order.newrefundtime }}</view>
                </view>
            </view>
            <view class="mdlsflexbox">
                <view class="centers">
                    <image class="icon-32 mr-10" :src="imgUrl + 'ordermoney.png'"></image>
                    <text class="codetext1">订单金额：</text>
                </view>
                <view class="centers">
                    <view class="codetext2">{{ order.orderamount }}</view>
                </view>
            </view>
            <view class="mdlsflexbox">
                <view class="centers">
                    <image class="icon-32 mr-10" :src="imgUrl + 'ordercode4.png'"></image>
                    <text class="codetext1">违约金额：</text>
                </view>
                <view class="centers">
                    <view class="codetext2" v-if="order.status == 5 || order.status == 12">¥{{ order.breakCcontractAmount ? order.breakCcontractAmount : '0.00' }}</view>
                    <view class="codetext2" v-if="order.status == 13">¥{{ order.handlingfee ? order.handlingfee : '0.00' }}</view>
                </view>
            </view>
            <view class="mdlsflexbox">
                <view class="centers">
                    <image class="icon-32 mr-10" :src="imgUrl + 'ordercode5.png'"></image>
                    <text class="codetext1">退款金额：</text>
                </view>
                <view class="centers">
                    <view class="codetext2">¥{{ order.orderRefund.refundamount ? order.orderRefund.refundamount : '0.00' }}</view>
                </view>
            </view>
        </view>
        <view class="ordercode" v-if="(status == 10 && order.paytime != null) || order.refundReason">
            <view class="mdlsflexbox">
                <view class="centers">
                    <image class="icon-32 mr-10" :src="imgUrl + 'leave.png'"></image>
                    <text class="codetext1">关闭原因：</text>
                </view>
                <view class="centers">
                    <view class="codetext2">{{ order.refundReason || order.orderRefund.handlingfee }}</view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
// component/ordertail/index.js
const app = getApp(); // 引入app

export default {
    data() {
        return {
            imgUrl: app.globalData.imgUrl //全局img路径
        };
    },
    /**
     * 组件的属性列表
     */
    props: {
        order: {
            type: Object
        },
        status: String
    },
    /**
     * 组件的方法列表
     */
    methods: {}
};
</script>
<style>
/* component/ordertail/index.wxss */

/* 订单信息 */
.ordercode {
    width: 710rpx;
    background: #ffffff;
    box-shadow: 1px 1px 4px 1px rgba(241, 241, 241, 0.4);
    border-radius: 5px;
    padding: 0rpx 20rpx;
    box-sizing: border-box;
    margin: 20rpx 20rpx 0 20rpx;
    font-size: 28rpx;
    font-family: PingFang-SC-Medium, PingFang-SC;
    font-weight: 500;
}

.mdlsflexbox {
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
}
.mr-10 {
    margin-right: 10rpx;
}

.centers {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    margin: 15rpx 0;
}

.codetext1 {
    color: #666666;
}

.codetext2 {
    color: #999999;
}

.icon-32 {
    width: 32rpx;
    height: 32rpx;
}
</style>
